var _v;
var vueModel = {
    el: '.main',
    data: {
        showLogin: false,
        cityList: [],
        params: {
            date_start: '',
            date_end: '',
            order_type: '',
            direction: '',
            price: {max: '', min: ''},
            city_id: '',
            key_words: '',
            star: [],
            limit: 10,
            page: 1
        },
        back_order_type: '',
        back_direction: '',
        customPrice: {
            max: '',
            min: ''
        },
        list: [],
        starListfil: [
            { label: '一星级', val: 1, checked: false },
            { label: '二星级', val: 2, checked: false },
            { label: '三星级', val: 3, checked: false },
            { label: '四星级', val: 4, checked: false },
            { label: '五星级', val: 5, checked: false },
            /*{ label: '酒店式公寓', val: 6, checked: false },
            { label: '经济型酒店', val: 7, checked: false },
            { label: '客栈', val: 8, checked: false },
            { label: '青年旅社', val: 9, checked: false },*/
        ],
        priceListfil: [
            { label: '0-200元', val: { max: 200, min: 0 } },
            { label: '200-500元', val: { max: 500, min: 200 } },
            { label: '500-800元', val: { max: 800, min: 500 } },
            { label: '800-1200元', val: { max: 1200, min: 800 } },
        ],
        total: 0
    },
    methods: {
        clearCustomPrice: function() {
            _v.customPrice.min = '';
            _v.customPrice.max = '';
        },
        getArea: function () {
            /*HQ.getArea(function(data) {
                _v.cityList = data.data;
            })*/
            HQ.getArea2(function(data) {
                _v.cityList = data;
            })
        },
        oldInitList: function () {
            $(window).scroll(function(){
                var winSroTop = $(window).scrollTop(),
                    seaHeight = $('#J_sea_price_cont').height(),
                    mapHeight = $('#J_map_wrap').height(),
                    hotelListOffTop = $('#J_hotel_list_mox').offset().top,
                    footerOffTop = $('#J_footer').offset().top;
                if($(window).scrollTop() < hotelListOffTop) {
                    $("#J_map_wrap").css({position : "static", top : 0});
                }else if ($(window).scrollTop() >= hotelListOffTop && $(window).scrollTop() < (footerOffTop - mapHeight - 200)) {
                    $("#J_map_wrap").css({position : "fixed", top : 80});
                }else if ($(window).scrollTop() >= footerOffTop - mapHeight - seaHeight - 200) {
                    if(mapHeight < 500) {
                        $("#J_map_wrap").css({position : "absolute", top : footerOffTop - hotelListOffTop - mapHeight - seaHeight - 20});
                    }else {
                        $("#J_map_wrap").css({position : "absolute", top : footerOffTop - hotelListOffTop - mapHeight - seaHeight - 30});
                    }
                }
            });
            //日期
            var language = 'zh-CN'

            var date = "";
            var dateFormat ="";
            if (language == 'zh-CN'){
                dateFormat = "yy-mm-dd";
            }else{
                dateFormat = "M-dd-yy";
            }
            var max_date = new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000);
            var zhou_week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
            var week = ["日", "一", "二", "三", "四", "五", "六"];
            var month = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
            var from = $("#from").datepicker({
                dateFormat : dateFormat,
                dayNames : zhou_week,
                altField: "#from_week",
                altFormat : "DD",
                minDate : new Date(),
                maxDate : max_date,
                to : "to",
                numberOfMonths: 2,
                dayNamesMin: week,
                monthNames: month,
                monthNamesShort: month,
                showAnim : "",
                onSelect : function(selectedDate){
                    selectedDate = format_date_en(selectedDate);
                    var time = selectedDate.split("-");
                    var time1 = [];
                    $("#to").datepicker( "option", "minDate", selectedDate);
                    time1[0] = time[0];
                    time1[1] = time[1] - 1;
                    time1[2] = time[2];
                    if(time[1] == 12){
                        time[0] = parseInt(time[0])+1;
                        time[1] = 0;
                        if(time[2] == 31){
                            time1[2] = 1;
                            time1[1] = 0;
                            time1[0] = time[0];
                        }else{
                            time1[2] = parseInt(time[2]) + 1;
                        }
                    }else{
                        time1[2] = parseInt(time[2]) + 1;
                    }
                    if(time[2] > 28){
                        time[2] = 28;
                    }
                    $("#from").css({color : "#333"});
                    $("#to").css({color : "#333"});

                    if (language == 'zh-CN'){
                        $("#to").val(time1[0] +"-"+ (parseInt(time1[1])+1) +"-"+ time1[2]);
                    }else{
                        $("#to").val(config.monthShort[parseInt(time1[1])] +"-"+ time1[2] +"-"+ time1[0]);
                    }
                    $("#to").datepicker( "option", "minDate", new Date(time1[0], time1[1], time1[2]));
                    $("#to").datepicker( "option", "maxDate", new Date(time[0], time[1], time[2]));
                    setTimeout(function(){
                        to.datepicker("show");
                    }, 10);
                }
            });
            var min_de_date = new Date($("#from").val());
            var min_de_month = min_de_date.getMonth();
            var min_de_year = min_de_date.getFullYear();
            var max_de_month = parseInt(min_de_month) + 1;
            var max_de_year = min_de_year;
            if (max_de_month == 13) {
                max_de_year = parseInt(min_de_year) + 1;
            }
            var max_de_date = new Date(max_de_year, max_de_month, min_de_date.getDate());
            var to = $("#to").datepicker({
                dateFormat : dateFormat,
                dayNames : zhou_week,
                altField: "#to_week",
                altFormat : "DD",
                minDate : min_de_date,
                maxDate : max_de_date,
                from : "from",
                dateMouse : true,
                numberOfMonths: 2,
                dayNamesMin: week,
                monthNames: month,
                showAnim : "",
                monthNamesShort: month
            });
            from.datepicker('setDate', _v.params.date_start)
            to.datepicker('setDate', _v.params.date_end)

            //支持placeholder
            $("#J_date input").each(function(){
                if($(this).val() == ""){
                    $(this).val($(this).attr("data-placeholder"));
                }
            });
            $("#J_date input").focus(function(){
                if($(this).val() == $(this).attr("data-placeholder")){
                    $(this).val("");
                }
            }).blur(function(){
                if($(this).val() == ""){
                    $(this).val($(this).attr("data-placeholder")).css("color","#999").parent().removeClass("index-date-error");
                }
            });
            if($("#J_city").val() == ""){
                $("#J_city").val($("#J_city").attr("data-placeholder")).css("color","#999");
                $("#J_list_sea_txt").val("");
            }
            $("#J_city").focus(function(){
                if($(this).val() == $(this).attr("data-placeholder")){
                    $(this).val("");
                }
            }).blur(function(){
                if($(this).val() == ""){
                    $(this).val($(this).attr("data-placeholder")).css("color","#999");
                }
            });
        },
        getQueryVariable: function (variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        },
        pageChange: function(c) {
            _v.params.page = c;
            _v.fetchData();
        },
        fetchData: function (t) {
            if (t === 'order') {
               if (this.back_order_type === this.params.order_type && this.back_direction === this.params.direction) {
                   this.params.order_type = '';
                   this.params.direction = '';
               }
               this.back_direction = this.params.direction;
               this.back_order_type = this.params.order_type;
            }
            var _token = localStorage.getItem('_token');
            var p = JSON.parse(JSON.stringify(_v.params))
            /*if (p.city_id !== '') {
                p.key_words = '';
            }*/
            if (!_token) {
                HQ.ajax("/hotel/search", JSON.stringify(_v.params), function(res){
                    if (res.code === 0) {
                        _v.list = res.data.list;
                        _v.total = res.data.total
                    }
                }, function(){}, "POST");
            } else {
                HQ.ajax('/hotel/search_with_price', JSON.stringify(_v.params), function(res){
                    if (res.code === 0) {
                        _v.list = res.data.list;
                    }
                }, function(){
                    localStorage.removeItem('_token');
                    _v.fetchData();
                }, "POST");
            }
        },
        selStar: function (item, i) {
            item.checked = !item.checked;
            if (item.checked) {
                _v.params.star.push(item.val);
            } else {
                _v.params.star = _v.params.star.filter(function(v) { return v !== item.val })
            }
            _v.fetchData();
        }
    },
    mounted: function () {
        _v = this;
        _v.params.date_start = _v.getQueryVariable('date_start') || '2020-05-06';
        _v.params.date_end = _v.getQueryVariable('date_end') || '2020-05-07';
        _v.params.city_id = _v.getQueryVariable('city_id') - '' || '';
        _v.params.key_words = decodeURIComponent(_v.getQueryVariable('key_words') || '');
        _v.oldInitList();
        _v.getArea();
        _v.fetchData();

        if (!!localStorage.getItem('_token')) {
            var nickname = JSON.parse(localStorage.getItem('_token') || '{}').nick_name;
            $('.nickname-box').find('.nickname').show().text(nickname);
            $('.login-reg-box').hide();
            $('.member-center-btn').show();
        } else {
            $('.login-reg-box').show();
            $('.nickname-box').hide();
            $('.member-center-btn').hide();
        }

        $('.list-logout-btn').click(function () {
            HQ.ajax("/logout/", {}, function (data) {
                if (data.code === 0) {
                    localStorage.removeItem('_token')
                    location.href = '/';
                } else {
                }
            }, function () {
            }, "POST");
        })
    }
}

$(function() {
    var vueInstan = new Vue(vueModel);
    $('#J_nav_menu_login').click(function () {
        vueInstan.showLogin = true;
    })
})